---
layout: typedoc
title: '@msrvida/sanddance'
---
<header>
<div class="tsd-page-title">
	<div class="typedoc-container">
	</div>
</div>
</header>
<div class="container container-main">
<div class="row">
	<div class="col-8 col-content">
		<div class="tsd-panel tsd-typography">
			<a href="#msrvidasanddance" id="msrvidasanddance" style="color: inherit; text-decoration: none;">
				<h1>@msrvida/sanddance</h1>
			</a>
			<p>Visually explore, understand, and present your data.</p>
			<p><img src="https://user-images.githubusercontent.com/11507384/54236654-52d42800-44d1-11e9-859e-6c5d297a46d2.gif" alt="sanddance-animation"></p>
			<p><a href="https://microsoft.github.io/SandDance/app">Demo</a> - <a href="https://microsoft.github.io/SandDance/docs/sanddance/v3">API Reference</a></p>
			<a href="#installation" id="installation" style="color: inherit; text-decoration: none;">
				<h2>Installation</h2>
			</a>
			<p>You will need to consider how to load the libraries that <code>sanddance</code> depends on, based on your build &amp; deployment scenario.</p>
			<a href="#installation-via-script-tags" id="installation-via-script-tags" style="color: inherit; text-decoration: none;">
				<h2>Installation via script tags</h2>
			</a>
			<p>Load dependencies via <code>&lt;script&gt;</code> tags in your HTML:</p>
			<pre><code class="language-html"><span style="color: #800000">&lt;script</span><span style="color: #000000FF"> </span><span style="color: #FF0000">src</span><span style="color: #000000FF">=</span><span style="color: #0000FF">&quot;https://unpkg.com/vega@^5.11/build/vega.js&quot;</span><span style="color: #000000FF"> </span><span style="color: #FF0000">charset</span><span style="color: #000000FF">=</span><span style="color: #0000FF">&quot;utf-8&quot;</span><span style="color: #800000">&gt;&lt;/script&gt;</span>
<span style="color: #800000">&lt;script</span><span style="color: #000000FF"> </span><span style="color: #FF0000">src</span><span style="color: #000000FF">=</span><span style="color: #0000FF">&quot;https://unpkg.com/deck.gl@~6.4/deckgl.min.js&quot;</span><span style="color: #800000">&gt;&lt;/script&gt;</span>
<span style="color: #800000">&lt;script</span><span style="color: #000000FF"> </span><span style="color: #FF0000">src</span><span style="color: #000000FF">=</span><span style="color: #0000FF">&quot;https://unpkg.com/@msrvida/sanddance@^3/dist/umd/sanddance.js&quot;</span><span style="color: #800000">&gt;&lt;/script&gt;</span>
</code></pre>
			<p>A global variable named <code>SandDance</code> will be available to you. In your JavaScript, call the <code>use</code> function to pass the dependency libraries:</p>
			<pre><code class="language-js"><span style="color: #001080">SandDance</span><span style="color: #000000">.</span><span style="color: #795E26">use</span><span style="color: #000000">(</span><span style="color: #001080">vega</span><span style="color: #000000">, </span><span style="color: #001080">deck</span><span style="color: #000000">, </span><span style="color: #001080">deck</span><span style="color: #000000">, </span><span style="color: #001080">luma</span><span style="color: #000000">);</span>
</code></pre>
			<a href="#installation-via-nodejs" id="installation-via-nodejs" style="color: inherit; text-decoration: none;">
				<h2>Installation via Node.js</h2>
			</a>
			<p>Add these to the <code>dependencies</code> section of your <code>package.json</code>, then run <code>npm install</code>:</p>
			<pre><code class="language-json"><span style="color: #A31515">&quot;@deck.gl/core&quot;</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;^8.3.7&quot;</span><span style="color: #000000">,</span>
<span style="color: #A31515">&quot;@deck.gl/layers&quot;</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;^8.3.7&quot;</span><span style="color: #000000">,</span>
<span style="color: #A31515">&quot;@msrvida/sanddance&quot;</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;^3&quot;</span><span style="color: #000000">,</span>
<span style="color: #A31515">&quot;@luma.gl/core&quot;</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;^8.3.1&quot;</span><span style="color: #000000">,</span>
<span style="color: #A31515">&quot;vega&quot;</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;^5.17.0&quot;</span>
</code></pre>
			<p>Import these in your JavaScript, then call the <code>use()</code> function to pass the dependency libraries to <code>SandDance.VegaDeckGl</code>:</p>
			<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">deck</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@deck.gl/core&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">layers</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@deck.gl/layers&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">luma</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@luma.gl/core&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">vega</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;vega&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">SandDance</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@msrvida/sanddance&#039;</span><span style="color: #000000">;</span>

<span style="color: #001080">SandDance</span><span style="color: #000000">.</span><span style="color: #795E26">use</span><span style="color: #000000">(</span><span style="color: #001080">vega</span><span style="color: #000000">, </span><span style="color: #001080">deck</span><span style="color: #000000">, </span><span style="color: #001080">layers</span><span style="color: #000000">, </span><span style="color: #001080">luma</span><span style="color: #000000">);</span>
</code></pre>
			<a href="#versions" id="versions" style="color: inherit; text-decoration: none;">
				<h2>Versions</h2>
			</a>
			<a href="#310-changes" id="310-changes" style="color: inherit; text-decoration: none;">
				<h3>3.1.0 Changes</h3>
			</a>
			<ul>
				<li>Fix for animation easing</li>
				<li>Text character set accepts all unicode</li>
			</ul>
			<a href="#breaking-changes-in-v3" id="breaking-changes-in-v3" style="color: inherit; text-decoration: none;">
				<h3>Breaking changes in v3</h3>
			</a>
			<ul>
				<li>deck.gl dependency from 6.4 to 8.1</li>
				<li>new <code>searchExpression</code> namespace<ul>
						<li><code>types.Search</code> moved here</li>
						<li><code>util.ensureSearchExpressionGroup</code> moved here</li>
					</ul>
				</li>
				<li>new <code>specs</code> namespace<ul>
						<li><code>types.Insight</code> moved here</li>
					</ul>
				</li>
				<li><code>ViewerOptions</code> colors are now <code>string</code> type</li>
				<li><code>VegaDeckGl.View</code> moved to <code>types.View</code></li>
			</ul>
			<a href="#breaking-changes-in-v2" id="breaking-changes-in-v2" style="color: inherit; text-decoration: none;">
				<h3>Breaking changes in v2</h3>
			</a>
			<ul>
				<li>vega dependency from 4.x to 5.x</li>
			</ul>
			<a href="#for-more-information" id="for-more-information" style="color: inherit; text-decoration: none;">
				<h2>For more information</h2>
			</a>
			<p>Please visit the <a href="https://microsoft.github.io/SandDance/">SandDance website</a>.</p>
		</div>
	</div>
	<div class="col-4 col-menu menu-highlight">
		<nav class="tsd-navigation primary">
			<ul>
				<li class=" ">
					<a href="modules.html">Exports</a>
				</li>
				<li class=" tsd-kind-namespace">
					<a href="modules/vegadeckgl.html">Vega<wbr>Deck<wbr>Gl</a>
				</li>
				<li class=" tsd-kind-namespace">
					<a href="modules/constants.html">constants</a>
				</li>
				<li class=" tsd-kind-namespace">
					<a href="modules/searchexpression.html">search<wbr>Expression</a>
				</li>
				<li class=" tsd-kind-namespace">
					<a href="modules/specs.html">specs</a>
				</li>
				<li class=" tsd-kind-namespace">
					<a href="modules/types.html">types</a>
				</li>
				<li class=" tsd-kind-namespace">
					<a href="modules/util.html">util</a>
				</li>
			</ul>
		</nav>
		<nav class="tsd-navigation secondary">
			<ul class="before-current">
				<li class=" tsd-kind-class">
					<a href="classes/viewer.html" class="tsd-kind-icon">Viewer</a>
				</li>
				<li class=" tsd-kind-variable">
					<a href="modules.html#colorschemes" class="tsd-kind-icon">color<wbr>Schemes</a>
				</li>
				<li class=" tsd-kind-variable">
					<a href="modules.html#version" class="tsd-kind-icon">version</a>
				</li>
				<li class=" tsd-kind-function">
					<a href="modules.html#use" class="tsd-kind-icon">use</a>
				</li>
			</ul>
		</nav>
	</div>
</div>
</div>
<div class="overlay"></div>